HTMLify

script.js
Views: 41 | Author: cody
$(document).ready(function() {

	let speed = 1000;

	let round = 1;
	let win = false;
	let numberOne;
  let numberTwo;
	let numberThree;

	let timeOne;
	let timeTwo;
	let timeThree;

	let stopOne = false;
	let stopTwo = false;
	let stopThree = false;

	changeNumberOne();
	changeNumberTwo();
	changeNumberThree();
	
	function numberRandom() {
		cypher = Math.floor( Math.random() * 10 );
		return cypher;
	}

	function changeNumberOne() {
		numberOne = numberRandom();
		$('.cypher-1').children('span').text(numberOne);
		timeOne = setTimeout(changeNumberOne, speed);
	}

	function changeNumberTwo() {
		numberTwo = numberRandom();
		$('.cypher-2').children('span').text(numberTwo);
		timeTwo = setTimeout(changeNumberTwo, speed - 200);
	}

	function changeNumberThree() {
		numberThree = numberRandom();
		$('.cypher-3').children('span').text(numberThree);
		timeThree = setTimeout(changeNumberThree, speed - 100);
	}

	function checkResult() {

		if ( stopOne == true && stopTwo == true && stopThree == true ) {
			if ( numberOne == numberTwo && numberTwo == numberThree ) {
				win = true;
				$('#reset').fadeIn();
				$('#result').children('p').children('#content-result').addClass('good').text('You Have Won :)');
				$('#reset').children('button').text('Next Rond');
			} else {
					win = false;
					$('#reset').fadeIn();
					$('#result').children('p').children('#content-result').addClass('bad').text('You Lost :(');
					$('#reset').children('button').text('Restart');
				}
		}

	}

	$('[class^="cypher-"]').on('click', function() {

		if ( $(this).hasClass('cypher-1') ) {
			stopOne = true;
			clearTimeout(timeOne);
			$('.cypher-1').children('span').addClass('active').text(numberOne);
			checkResult();
		}

		if ( $(this).hasClass('cypher-2') ) {
			stopTwo = true;
			clearTimeout(timeTwo);
			$('.cypher-2').children('span').addClass('active').text(numberTwo);
			checkResult();
		}

		if ( $(this).hasClass('cypher-3') ) {
			stopThree = true;
			clearTimeout(timeThree);
			$('.cypher-3').children('span').addClass('active').text(numberThree);
			checkResult();
		}

	});

	$('#reset').on('click', function() {

		if ( win == true ) {
			round++;
			speed -= 250;
		}	else {
				round = 1;
				speed = 1000;
			}

		$(this).fadeOut();
		$('.active').removeClass('active');
		$('#result').children('p').children('#round').text(`${ round }:`).siblings('#content-result').removeClass('good bad').text('Click and get 3 equal Numbers');
		stopOne = false;
		stopTwo = false;
		stopThree = false;

		changeNumberOne();
		changeNumberTwo();
		changeNumberThree();

	});

});

Comments